<template>
  <div class="home_wrapper">
    <nav-bar class="home-navbar">
      <!-- 在顶部navbar插件的中间插槽中放入页面标题 -->
      <span slot="app-navbar-center" class="home-navbar-title">优品商城</span>
    </nav-bar>
    <better-scroll @pullingUp="getGoods" ref="scroll" @scroll="scroll">
      <!-- 轮播图 -->
      <home-swiper :slideList="slideList"></home-swiper>
      <!-- 推荐菜单栏 -->
      <recomend-view :recomendList="$store.state.recomendList"></recomend-view>
      <!-- 推荐选择框 -->
      <recomend-select :selectInfo="selectInfo"></recomend-select>
      <!-- 选择器 -->
      <select-cotroler
        :selecterControlerList="selecterControlerList"
        @selectCotrolerClick="selectCotrolerClick"
      ></select-cotroler>

      <!-- 商品展示 -->
      <div class="good_item_wrapper">
        <good-item
          v-for="(item, index) of currentGoods"
          :key="index"
          :good-item="item"
          @imgLoad="imgLoad"
        ></good-item>
      </div>
    </better-scroll>
    <back-top @back_top="back_top" v-show="backTopShowIf"></back-top>
  </div>
</template>

<script>
// 导入滚动，使页面具有滚动效果
import BetterScroll from "@/components/common/scroll/scroll.vue";
// 导入顶部navbar插件
import NavBar from "@/components/common/navbar/NavBar.vue";
// 导入swiper组件
import HomeSwiper from "@/components/common/swiper/swiper.vue";
// 导入推荐菜单
import RecomendView from "@/views/home/recomend/recomendView.vue";
// 推荐选项
import RecomendSelect from "@/views/home/recomend/select/recomendSelect.vue";
// 导入选择器组件
import SelectCotroler from "@/components/content/selectCotroler.vue";
// 导入单个商品GoodItem组件
import GoodItem from "@/components/content/goods/goodItem.vue";
// 导入返回顶部按钮
import BackTop from "@/components/common/backTop/backTop.vue";
// 导入请求方法
import {
  recomendSelectList,
  getslideList,
  getGoodsList,
} from "@/network/home.js";
import { debounce } from "@/components/common/utils/utils.js";
export default {
  name: "home",
  components: {
    BetterScroll,
    NavBar,
    HomeSwiper,
    RecomendView,
    RecomendSelect,
    SelectCotroler,
    GoodItem,
    BackTop,
  },
  props: {},
  data() {
    return {
      // 轮播图数据
      slideList: [],
      // 首页选择器菜单信息
      selecterControlerList: ["流行", "好物", "推荐"],
      // 推荐选择器模块的展示数据
      selectInfo: {},
      // 为尝试vux，分类菜单数据存储在vuex中

      // 当前活跃的选择框选项
      currentSelectIndex: 0,
      // 商品数据
      goods: {
        popular: { page: 0, list: [] },
        news: { page: 0, list: [] },
        comend: { page: 0, list: [] },
      },
      currentPositionY: 0,
    };
  },
  watch: {},
  computed: {
    selectIndexString() {
      return this.currentSelectIndex == 0
        ? "popular"
        : this.currentSelectIndex == 1
        ? "news"
        : this.currentSelectIndex == 2
        ? "comend"
        : "popular";
    },
    currentGoods() {
      return this.goods[this.selectIndexString].list;
    },
    // 返回顶部按钮是否显示
    backTopShowIf() {
      return this.currentPositionY <= -1000;
    },
  },

  methods: {
    back_top(x, y, time) {
      this.$refs.scroll.back_top(x, y, time);
    },
    scroll(position) {
      this.currentPositionY = position.y;
    },
    // 初始化页面函数
    initData() {
      // 获取swiper数据
      getslideList()
        .then((result) => {
          this.slideList = result;
        })
        .catch((err) => {
          console.log(err);
        });
      // 获取选择器数据
      this.updateSelectItem(0);

      // 调用数据，更新商品数据
      this.getGoods();
    },
    // 更新选择器item方法
    updateSelectItem(index) {
      recomendSelectList(index)
        .then((result) => {
          this.selectInfo = result;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    selectCotrolerClick(index) {
      // 检测到点击事件后做的事

      // 3 将当前选择框所在的位置记录下来
      this.currentSelectIndex = index;
      // 1 更新选择器上方信息
      this.updateSelectItem(index);
      // 2 更新商品信息
      this.getGoods();
    },
    // 请求商品数据方法

    getGoods() {
      let page = this.goods[this.selectIndexString].page++;
      getGoodsList(this.selectIndexString, page)
        .then((result) => {
          if (result.length === 0) {
            this.goods[this.selectIndexString].page--;
            return;
          } else {
            this.goods[this.selectIndexString].list.push(...result);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    imgLoad() {
      this.$refs.scroll.refresh();
    },
  },
  created() {
    // 初始化首页数据
    this.initData();
    this.imgLoad = debounce(this.imgLoad, 100);
  },
};
</script>
<style scoped>
.home_wrapper {
  position: relative;
  height: 100vh;
}
.home-navbar {
  background-color: #ea8685;
  z-index: 10;
}
.home-navbar-title {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.5em;
  color: #ffffff;
  text-align: center;
}
.good_item_wrapper {
  margin-bottom: 44px;
  padding-top: 20px;
  margin-top: 30px;
  margin-bottom: 50px;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}
</style>